<template>
  <!-- 管理员管理 -->
  <div>
    <div class="form-container">

      <div class="form-item">
        <span>账号：</span>
        <el-input v-model="input" placeholder="请输入账号" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>时间：</span>
        <div class="time-inputs">
          <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>

      <div class="form-buttons">
        <el-button type="primary">查询</el-button>
        <el-button type="success">重置</el-button>
        <!-- 新增下拉框 -->
        <el-select v-model="statusValue" placeholder="请选择状态" style="width: 120px">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="normal"></el-option>
          <el-option label="禁用" value="disabled"></el-option>
        </el-select>
      </div>
    </div>


    <el-table :data="tableData" border style="width: 100%" class="custom-header-table">
      <el-table-column fixed prop="adminAccount" label="管理员账号"></el-table-column>
      
      <el-table-column prop="adminPassword" label="管理员密码"></el-table-column>

      <el-table-column prop="adminIdentity" label="管理员身份"></el-table-column>

      <el-table-column prop="creationTime" label="创建时间"></el-table-column>

      <!-- 新增状态列，位于倒数第二列 -->
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 操作列宽度设置为150px -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scoped">
          <el-button @click="handleClick(scoped.row)" type="text" size="small">修改密码</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


    <!-- 分页组件：左对齐并距离表格10px -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>

</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },

  data() {
    return {
      input: '',
      value1: '',
      statusValue: '', // 下拉框绑定的值
      tableData: [{
        adminAccount: '1731507845',
        adminPassword: '785jhg',
        adminIdentity: '用户管理员',
        creationTime: '2025-09-15',
        status: '正常' // 新增状态数据
      }, {
        adminAccount: '1731507846',
        adminPassword: 'abc123',
        adminIdentity: '系统管理员',
        creationTime: '2025-09-16',
        status: '正常' // 新增状态数据
      }, {
        adminAccount: '1731507847',
        adminPassword: 'def456',
        adminIdentity: '审计管理员',
        creationTime: '2025-09-17',
        status: '禁用' // 新增状态数据
      }, {
        adminAccount: '1731507848',
        adminPassword: 'ghi789',
        adminIdentity: '用户管理员',
        creationTime: '2025-09-18',
        status: '正常' // 新增状态数据
      }]
    }
  }
}
</script>


<style scoped>
/* 新增表单容器样式 */
.form-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

/* 表单项样式调整 */
.form-item {
  display: flex;
  align-items: center;
}

.form-item span {
  margin-right: 8px;
  white-space: nowrap;
}

/* 时间输入框容器 */
.time-inputs {
  display: flex;
  gap: 10px;
}

/* 按钮容器样式 */
.form-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 分页样式保持不变 */
.pagination-left {
  margin-top: 10px;
  text-align: left;
}

/*表头高度调整 */
.custom-header-table ::v-deep .el-table__header th {
  height: 48px;
  line-height: 48px;
  padding: 0;
  background-color: #f5f7fa;
  font-weight: bold;
}

/* 表头单元格内容样式 */
.custom-header-table ::v-deep .el-table__header .cell {
  line-height: 48px;
}
</style>
